var train = document.querySelector(".space"),
	plane = document.querySelector(".plane"),
	box = document.querySelector(".web");

//   背景运动
function running() {

	train.style.transform = "translateY(100%)";
	train.addEventListener("transitionend", function run_end() {
		var sky = document.querySelectorAll(".sky");
		train.appendChild(sky[0].cloneNode(true));
		sky[0].remove();
		getComputedStyle(train).transform;

		train.style.transition = "none";
		train.style.transform = "translateY(0%)";

		getComputedStyle(train).transform;
		train.style.transition = "";
		train.removeEventListener("transitionend", run_end)
		running();
	})

}

// 新分数牌
function new_score() {
	var score_left = Math.ceil(Math.random() * 80);
	var score = document.createElement("img");
	score.style.top = "-10%";
	score.style.left = score_left + "%";
	score.setAttribute("class", "score");
	score.setAttribute("src", "img/score.png");
	box.appendChild(score);
	getComputedStyle(score).transform;
	score.style.transform = "translateY(1000%)";
	score.addEventListener("transitionend", function score_end() {
		score.remove();
	})
}

// 新的石头
function new_rock() {
	var rocks_left = Math.ceil(Math.random() * 80);
	var rd_rocks = Math.ceil(Math.random() * 5);
	var rocks = document.createElement("img");
	rocks.style.top = "-10%";
	rocks.style.left = rocks_left + "%";
	rocks.setAttribute("class", "rock");
	rocks.setAttribute("src", "img/rock" + rd_rocks + ".png");
	box.appendChild(rocks);
	getComputedStyle(rocks).transform;
	rocks.style.top = "100%";
	rocks.addEventListener("transitionend", function rocks_end() {
		rocks.remove();
	})
}

function start_run() {
	var start_space = document.querySelector(".start_space");
	plane.innerHTML = "<img src='img/plane.png'/>";
	train.style.transform = "translateY(100%)";
	train.addEventListener("transitionend", function start_pre() {
		start_space.remove();
		train.style.top = "-100%";

		running();

	})
}

// 碰撞检测
function meet_event() {
	var all_things = document.getElementsByClassName("rock");
	var plane_left = plane.offsetLeft;
	var plane_top = plane.offsetTop;
	for(var i = 0; i < all_things.length; i++) {

		var img_left = all_things[i].offsetLeft;
		var img_top = all_things[i].offsetTop;

		if(img_top > 0 && (img_top + all_things[i].offsetHeight) >= plane_top && (img_left + all_things[i].width) >= plane_left && (plane_left + plane.offsetWidth) >= img_left) {
			plane.style.width = "30%";
			plane.innerHTML = "<img src='img/boom.gif' />";
			clearInterval(new_score);
			clearInterval(new_rock);

			//    alert("you are loser")
			console.log(all_things[i]);

		}

	}
}

// 遮罩层
var box_mask = box.children[0];
var mask_close = box_mask.children[1];

// 开始游戏按钮
btn_start.addEventListener("click", function() {
	btn_i = 0;
	clearInterval(start_timer);
	btn_timer = setInterval(function() {
		btn_start.style.right = -btn_i + "%";
		btn_rule.style.right = -btn_i + "%";
		btn_i++;
		if(btn_i > 48) {
			clearInterval(btn_timer);
			start.style.display = "none";
			box.style.display = "block";
			document.body.setAttribute("style", "");
			mYanimate(box_mask, {
				"opacity": 100
			}, 50);
		}
	})
})
// 关闭遮罩层按钮
mask_close.addEventListener("click", function() {
	// 关闭遮罩层，执行背景滚动
	mYanimate(box_mask, {
		"opacity": 0
	}, 50, start_run);
	// 左按钮
	myClick.plane_left(".btn_left", plane);
	// 右按钮
	myClick.plane_right(".btn_right", plane);
	//   随机生成石头和奖牌
	setInterval(new_score, 5000);
	setInterval(new_rock, 1000);
	setInterval(meet_event, 50);
})